<!-- pages/business/index.vue | Uni-App Vue2 版本 -->
<template>
  <view class="page">
    <!-- 常用业务 -->
    <view class="section">
      <view class="section-hd"><text class="title">常用业务</text></view>
      <view class="grid">
        <view v-for="(item, index) in navs" :key="index" class="grid-item" @tap="tapMenu(item)">
          <view class="icon-wrap" :style="{ background: item.bg || '#F7F7F7' }">
            <image class="icon" :src="item.cover" mode="aspectFit"></image>
          </view>
          <text class="label" :style="{ color: '#333' }">{{ item.title }}</text>
        </view>
      </view>
    </view>

    <!-- 任务切换栏 -->
    <view class="tabs">
      <view v-for="(t,i) in tabs" :key="i" :class="['tab', activeTab===i?'active':'']" @tap="switchTab(i)">
        <text>{{ t }}</text>
        <view v-if="activeTab===i" class="tab-underline"></view>
      </view>
    </view>

    <!-- 列表区域 -->
    <scroll-view scroll-y class="list" style="width: 95%;">
      <view v-if="!data_list.length" class="empty">
        <image class="empty-img" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/xiapu/empty.png?1" mode="widthFix"></image>
        <text class="empty-txt">暂无数据</text>
      </view>
      <view v-else>
        <view class="card" v-for="(item,index) in data_list" :key="index" @tap="openDetail(index)">
          <view class="card-hd">
            <text class="card-title">{{ item.cname }} {{item.type_name}} {{item.step_name ? item.step_name : '提交信息'}}</text>
            <text class="card-time">{{ item.create_time }}</text>
          </view>
          <view class="card-bd">
            <text class="card-desc">{{ item.brand }} {{item.name}}</text>
          </view>
          <view class="card-ft">
            <view class="tag">{{item.status_name}}</view>
          </view>
        </view>
      </view>
	  <div v-if="data_list.length == 0">
	  	<image src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/xiapu/empty.png?1" mode="widthFix" style="width: 100%;margin-top:40rpx"></image>
	  </div>
	  <text class="loading-text" v-else>
	    {{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
	  </text>
    </scroll-view>

  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;
var userInfo;
export default {
  data() {
    return {
      if_login:false,
      tabs: ['待办','已办','办结','驳回'],
	  tabs_ids:[2,1,4,3],
      activeTab: 0,
      menus: [],
      list: [],
	  navs:[],
      loading: true,
	  data_list:[],
	  loadingType: 0,		
	  page:0,
	  contentText: {
	      contentdown: "上拉显示更多",
	      contentrefresh: "正在加载...",
	      contentnomore: "已经到底了哦"
	  },
    }
  },
  onShow() {
	that = this;
	that.load_navs();
    //this.fetchMenus();
	that.plusReady();
    
  },
  methods: {
	  //初始化
	  plusReady(){
	  	var func1 = function(){
	  		that.no_login();
	  	}
	  	var func2 = function(){
	  		that.is_login();
	  	}
	  	common_config.common_if_login(func1,func2);
	  },
	  //未登录
	  no_login(){
	  	that.if_login = false;
	  },
	  //已登录
	  is_login(){
	  	that.if_login = true;
		userInfo = uni.getStorageSync('userInfo');
		userInfo = JSON.parse(userInfo);
		//this.fetchList();
	  	that.load_list();
	  },
	  load_list(){
		 
	  	//列表请求链接
	  	 that.list_url =config.request_url+'/index/yewu/task_list?token='+userInfo.token+'&st='+this.tabs_ids[that.activeTab];
	  	//加载列表
	  	common_config.load_common_list(that.list_url,that,'data_list');
	  },
    // —— 接口示例 ——
    // 1) 获取“常用业务”菜单
    // GET https://api.example.com/menus
    // 响应示例：
    // { "code":0, "data":[ {"id":1,"name":"潜客","icon":"https://cdn.example.com/icons/qianke.png","bg":"#FFEADF"}, ... ] }
    fetchMenus() {
      uni.request({
        url: 'https://api.example.com/menus',
        method: 'GET',
        success: ({ data }) => {
          if (data && Array.isArray(data.data)) this.menus = data.data
        },
        complete: () => {
          // —— 本地兜底示例数据（演示用） ——
          if (!this.menus || !this.menus.length) {
            this.menus = [
              { id: 1, name: '潜客', icon: '/static/icons/1.png', bg: '#FFE9D8' },
              { id: 2, name: '预约验车', icon: '/static/icons/2.png', bg: '#E4F2EC' },
              { id: 3, name: '现场验车', icon: '/static/icons/3.png', bg: '#FFEDE1' },
              { id: 4, name: '公海', icon: '/static/icons/4.png', bg: '#FFF3E3' },
              { id: 5, name: '车辆竞价', icon: '/static/icons/5.png', bg: '#FFF1E7' },
              { id: 6, name: '采购申请', icon: '/static/icons/6.png', bg: '#EAF3F7' },
              { id: 7, name: '出售申请', icon: '/static/icons/7.png', bg: '#EDEFFB' },
              { id: 8, name: '试驾', icon: '/static/icons/8.png', bg: '#E7EEF7' },
              { id: 9, name: '樱蜜管理', icon: '/static/icons/9.png', bg: '#FFF6E6' },
              { id:10, name: '业务闭环', icon: '/static/icons/10.png', bg: '#FFF1E7' },
              { id:11, name: '价格评估', icon: '/static/icons/11.png', bg: '#FFF3E8' }
            ]
          }
        }
      })
    },
	load_navs(){
		var url = config.request_url+'/index/index/load_navs';
		uni.request({
			url:url,
			success:(res) => {
				res = res.data;
				if(res.code == 200){
					that.navs = res.data;
				}
			}
		});
	},
    // 2) 获取任务列表
    // GET https://api.example.com/tasks?status=pending|done|closed|all&page=1&pageSize=20
    // 响应示例：
    // { "code":0, "data":[ {"id":1001,"title":"张三 预约验车","desc":"车牌 粤A12345 · 明日10:00","time":"2025-10-29 10:00","tags":["优先","到店"]} ] }
    fetchList() {
      const statusMap = ['pending','done','closed','all']
      this.loading = true
      uni.request({
        url: `https://api.example.com/tasks?status=${statusMap[this.activeTab]}&page=1&pageSize=20`,
        method: 'GET',
        success: ({ data }) => {
          if (data && Array.isArray(data.data)) this.list = data.data
        },
        complete: () => {
          // —— 本地兜底示例数据 ——
          if (!this.list || !this.list.length) {
            this.list = [
              { id:1001, title:'张三 预约验车', desc:'车牌 粤A12345 · 明日 10:00', time:'2025-10-29 10:00', tags:['优先','到店'] },
              { id:1002, title:'李四 采购申请', desc:'车型：本田 CR-V · 2.0L', time:'2025-10-29 14:30', tags:['新单'] },
              { id:1003, title:'王五 价格评估', desc:'VIN: LHGCM82633A004352', time:'2025-10-30 09:00', tags:['评估'] },
              { id:1004, title:'公海线索回收', desc:'3条线索即将过期，请跟进', time:'2025-10-30 12:00', tags:['提醒'] }
            ]
          }
          this.loading = false
        }
      })
    },

    switchTab(i) {
      if (this.activeTab === i) return
      this.activeTab = i;
	  that.list_url =config.request_url+'/index/yewu/task_list?token='+userInfo.token+'&st='+that.tabs_ids[i];
	  that.data_list = [];
	  that.page = 0;
	  that.loadingType = 0;
	  common_config.load_common_list(that.list_url,that,'data_list');
    },

    tapMenu(item) {
		if(!that.if_login){
			uni.navigateTo({
				url:'/pages/index/login'
			});
			return false;
		}
		uni.navigateTo({
			url:item.url
		})
      // 可跳转或业务逻辑
      uni.showToast({ title: item.name, icon: 'none' })
    },

    openDetail(index) {
		if(that.data_list[index].type_id == 1366){
			if(that.activeTab == 3){
				
				uni.navigateTo({
					url:'/pages/index/pinggu1?vin='+that.data_list[index].vin+'&car_index='+that.data_list[index].car_index+'&id='+that.data_list[index].cid
				});
			}else{
				uni.navigateTo({
					url:'/pages/index/preview_price?vin='+that.data_list[index].vin+'&car_index='+that.data_list[index].car_index+'&id='+that.data_list[index].cid
				});
			}
			
			
		}
		if(that.data_list[index].type_id == 1362){
			uni.navigateTo({
				url:'/pages/index/preview_caigou?vin='+that.data_list[index].vin+'&car_index='+that.data_list[index].car_index+'&id='+that.data_list[index].cid+'&price_id='+that.data_list[index].price_id
			});
		}
      //uni.showModal({ title: item.title, content: item.desc, showCancel: false })
    },

    goto(name){
      uni.showToast({ title: `去往：${name}` , icon:'none'})
    }
  }
}
</script>

<style lang="scss" scoped>
.content{padding-bottom: 120rpx;}
.loading-text{text-align: center;display: block;padding: 20rpx 0px;font-size:30rpx;color: #999;width: 100%;}
.page{min-height:100vh;background:#f6f7fb;padding-bottom:120rpx;}
.topbar{height:88rpx;display:flex;align-items:center;justify-content:space-between;padding:0 24rpx;background:#fff;box-shadow:0 2rpx 8rpx rgba(0,0,0,.04);} .time{font-weight:600;color:#111;} .dot{margin-left:8rpx;color:#999;}
.section{padding:24rpx;} .section-hd{display:flex;align-items:center;margin-bottom:16rpx;} .title{font-size:32rpx;font-weight:700;color:#222;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20rpx;} .grid-item{background:#fff;border-radius:16rpx;padding:22rpx 10rpx;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6rpx 16rpx rgba(0,0,0,.04);} .icon-wrap{width:96rpx;height:96rpx;border-radius:24rpx;display:flex;align-items:center;justify-content:center;} .icon{width:56rpx;height:56rpx;} .label{margin-top:12rpx;font-size:24rpx;}
.tabs{display:flex;background:#fff;padding:0 24rpx;box-shadow:0 2rpx 8rpx rgba(0,0,0,.04);} .tab{flex:1;height:90rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#666;} .tab.active{color:#111;font-weight:600;} .tab-underline{position:absolute;bottom:0;left:20%;right:20%;height:6rpx;background:#ff6b00;border-radius:6rpx;}
.list{height:780rpx;padding:24rpx;} .loading{color:#666;text-align:center;padding:60rpx 0;} .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80rpx 0;color:#999;} .empty-img{width:280rpx;margin-bottom:12rpx;} .empty-txt{font-size:26rpx;}
.card{background:#fff;border-radius:18rpx;padding:20rpx;margin-bottom:20rpx;box-shadow:0 6rpx 18rpx rgba(0,0,0,.05);} .card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10rpx;} .card-title{font-size:28rpx;font-weight:700;color:#222;} .card-time{font-size:22rpx;color:#999;} .card-bd{margin:6rpx 0 10rpx;} .card-desc{font-size:24rpx;color:#666;} .card-ft{display:flex;flex-wrap:wrap;} .tag{font-size:20rpx;color:#ff6b00;background:#fff2e8;border-radius:999rpx;padding:6rpx 14rpx;margin-right:10rpx;}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:110rpx;background:#fff;display:flex;align-items:center;justify-content:space-around;box-shadow:0 -6rpx 18rpx rgba(0,0,0,.06);} .tb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;} .tb-item.active{color:#ff6b00;} .tb-ic{font-size:36rpx;line-height:1;} .tb-txt{font-size:22rpx;margin-top:6rpx;}
</style>